<template>
	<div class="tmpl">
		<div class="photo-bottom">
			<ul>
				<li class="photo-comment">
					<div>
						<span>提交评论</span>
						<span><a >返回</a></span>
					</div>
				</li>
				<li class="text-comment">
					<textarea v-model="newComment"></textarea>
				</li>
				<li>
					<mt-button size="large" type="primary" @click="sendMsg">发表评论</mt-button>
				</li>
				<li class="photo-comment">
					<div>
						<span>评论列表</span>
						<span>22条评论</span>
					</div>
				</li>
			</ul>
			<br/>
			<ul class="comment-list">
				<li v-for="(msg,index) in msgs" :key="msg.ID">
					{{msg.user_name}}:{{msg.content}} {{msg.add_time | relativeTime() }}
				</li>
			</ul>
			<mt-button size="large" type="danger" plain @click="loadMore(page)">加载更多{{page}}</mt-button>
		</div>
	</div>
</template>
<script>
	export default {
		name:'comment',
		props:['cid'], // 评论需要的id
		data() {
			return {
				msgs:[], // 评论信息
				page: 0, // 组件内loadMore控制页码
				newComment:'', // 新的消息
				comments:[ // 评论数据模拟
					{user_name:'喜羊羊',content:'智慧的化身',add_time:'2019-12-11 17:06:20'},
					{user_name:'美羊羊',content:'我是最可爱的',add_time:'2019-12-11 17:05:20'},
					{user_name:'沸羊羊',content:'锻炼使我快乐',add_time:'2019-12-11 16:30:20'},
					{user_name:'懒羊羊',content:'我还要吃',add_time:'2019-12-11 16:20:20'},
					{user_name:'慢羊羊',content:'智慧的结晶',add_time:'2019-12-11 15:40:20'}
				]
			}
		},
		created() {
			// 使用这个组件时，是否有页码，如果有按页码获取，没有获取第1页
			let id = this.$route.query.page || '1';
			// 获取评论数据
			this.loadMore();	
		},
		methods: {
			// 根据页码发请求
			/*
			firstLoad() {
				if(this.page > this.comments.length)
				{
					this.$toast('暂无更多评论~');
				}
				// 此处使用模拟数据
				this.msgs = this.comments;
				// getcomments/${this.cid}?pageIndex=${id}

				this.$axios.get('https://api.apiopen.top/getJoke?page=${id}')
				.then( res => {
					if(res.data.result.length === 0){
						this.$toast('暂无更多评论~');
					}
					this.msgs = res.data.result;
					this.page ++; // 页码
				})
				.catch(err => console.log('获取评论失败',err));
			},*/
			// 该函数传参，表示页面点击加载更多按钮，做数据追加，不传参时为第一次或刷新第n页数据
			loadMore(page) {
				if(this.page > this.comments.length)
				{
					this.$toast('暂无更多评论~');
				} else {
					if(page) {
					this.msgs = this.msgs.concat(this.comments);
					} else {
						this.msgs = this.comments;
					}
					this.page ++;
				}
				/*this.$axios.get('https://api.apiopen.top/getJoke?page=${id}')
				.then( res => {
					if(res.data.result.length === 0){
						this.$toast('暂无更多评论~');
					} else {
						if(page) {
							this.msgs = this.msgs.concat(res.data.result);
						} else {
							this.msgs = res.data.result;
						}
						this.page ++; // 页码
					}
				})
				.catch(err => console.log('获取评论失败',err));*/
			},
			// 发表评论
			sendMsg() {
				// 发表致歉判断是否为空
				if(this.newComment.trim() === ''){
					return this.$toast('评论信息不能为空!');
				}
				// 模拟评论发表成功后刷新评论到第一页，并显示最新数据
				this.msgs.unshift({
					user_name:'匿名用户',
					content:this.newComment,
					add_time:Date.parse(new Date())
				});
				this.newComment = '';
				this.page = 1;
				this.loadMore();
				// 获取评论信息 this.newComment
				/*this.$axios.post('')
				.then(res => {
					// 发表成功后,清空评论框
					this.newComment = '';
				})
				.catch(err => console.log('发表评论失败',err))*/
			}

		}
	}
</script>
<style scoped>
	.photo-comment > div span:nth-child(1) {
		float: left;
		font-weight: bold;
		margin-left: 5px;
	}
	.photo-comment > div span:nth-child(2) {
		float: right;
	}
	.text-comment {
		width: 90%;
		margin: 0 auto;
		padding:5px 5px;
	}
	.text-comment textarea {
		width: 100%;
		font-size: 16px;
		margin: 8px 0px 5px 0px;
	}
	.comment-list ul {
		margin: 10px;
	}
	.comment-list li {
		border-bottom: 1px solid rgba(0,0,0,0.2);
		padding-bottom: 5px;
		margin-bottom: 5px;
		padding-left: 5px;
	}
	.comment-list li:nth-child(1) {
		border-top: 1px solid rgba(0,0,0,0.2);
		padding-top: 5px;
		margin-top: 5px;
	}
	li {
		list-style: none;
	}
	ul {
		margin: 0;
		padding: 0;
	}
</style>